@mixin navActive {
	@include grayGradientHover;
	//@include shadowMenuDark;
}
@mixin shadowMenu {
	//@include box-shadow(1px 1px 1px #333, inset 0px 0px 1px #fff);
}
@mixin shadowMenuDark {
	$color 	:	#000; 
	$blur 	:	1px;
	$offset : 	1px 1px;
	
	$color2 	:	rgba(0,0,0,0.7); 
	$blur2 		:	20px;
	$offset2 	: 	0 0;

	 	-ms-box-shadow: $color $offset $blur,
	 					inset $color2 $offset2 $blur2;
	 	 -o-box-shadow: $color $offset $blur,
	 					inset $color2 $offset2 $blur2;
	   -moz-box-shadow: $color $offset $blur,
	 					inset $color2 $offset2 $blur2;
	-webkit-box-shadow: $color $offset $blur,
	 					inset $color2 $offset2 $blur2;
			box-shadow: $color $offset $blur,
	 					inset $color2 $offset2 $blur2;
	
}
#globalheader {
	position:relative;
	display:block;
	height:36px;
	margin:18px auto;
	text-align:left;
	z-index:1;
	ul {
		@include box-shadow(1px 1px 1px #333);
	}
}
#globalnav {
	@include border-radius(5px);
	font-size:0.8em;
	//border:1px solid #333;
	

	ul.section { //section menu
		position: absolute;
		left:0px;
		visibility:hidden;
		border-top: 0px;
		opacity:0.0;
		@include transition-property(opacity);
		@include transition-duration(0.5s);
		a {
		width:108px;
			border:0px;
			border-top: 1px solid #333;
		}
	}
	
	ul.subSection { //subsection menu
		position:absolute;
		left:108px;
		top:0px;
		visibility: hidden;
		opacity: 0.0;
		border-left:1px solid #555;
		@include transition-property(opacity);
		@include transition-duration(0.5s);
		a {
		width:107px;
			border:0px;
			border-top: 1px solid #333;
    	}
	}
	
	
	a {
		background-color:#767676;
		@include filter-gradient(#767676, #494949, vertical);
		@include background-image(linear-gradient(top, #767676 0%, #636363 50%, #494949 51%,#767676 100%));
		@include shadowMenu;
		@include transitionMenu;
		@include text-shadow(#333 1px 1px 0px);
		@include box-shadow(inset #fff 0px 0px 2px);
		width:107px;
		height:36px;  
		overflow:hidden;
		border-left: 1px solid #333;
		display: block;
		text-decoration: none;
		color: white;
		span {
		   	margin-top: 9px;
			display: block;
		}
		&:hover, &.active, &:focus {
		    @include grayGradientHover;
            @include box-shadow(inset #555 0px 0px 20px);
		}
		&.sectionActive, &.subSectionActive {
		    @include grayGradientHover;
            @include box-shadow(inset #555 0px 0px 20px);
		}
	} 
	li {
		list-style: none;
	    float: left;
	    position: relative;
		text-align: center;
		&:first-child a.root{
			@include roundedLeft;
			border-left:0px;
		}
		&:last-child a.root{
			@include roundedRight;
		}
		&:hover ul.section {
			display:block;
			visibility:visible;
			opacity:1.0;
			li {
				&:hover ul.subSection {
					display:block;
					visibility: visible;
					opacity: 1.0;
				}
			}
		}
		li {
	    	float: none;
    		display: block;
		}
	}
	&:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}          	
}